<template>
	<view class="hot-container">
		<!-- 1. 导入 mescroll-body -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<block v-for="(item, index) in videoList" :key='index'>
				<hot-video-item :data="item" class="video-item" @click="onItemClick" />
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	// 2. 导入 mixin
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import { getHotVideoList } from 'api/video';
	import { mapMutations } from 'vuex'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				videoList: [], // 数据源
				size: 10,
				page: 1,
				isInit: true,
				mescroll: null
			};
		},
		mounted() {
			this.mescroll = this.$refs.mescrollRef.mescroll;
		},
		methods: {
			...mapMutations('video', ['setVideoData']),
			/**
			 * 获取列表数据
			 */
			async loadHotVideoList() {
				const { data: res } = await getHotVideoList({
					size: this.size,
					page: this.page
				})
				if (this.page === 1) {
					this.videoList = res.list
				} else {
					this.videoList = [...this.videoList, ...res.list]
				}
			},
			async mescrollInit() {
				await this.loadHotVideoList()
				this.isInit = false
				this.mescroll.endSuccess()
			},
			async downCallback() {
				if (this.isInit) return
				this.page = 1
				await this.loadHotVideoList()
				this.mescroll.endSuccess()
			},
			async upCallback() {
				if (this.isInit) return
				this.page += 1
				await this.loadHotVideoList();
				this.mescroll.endSuccess()
			},
			onItemClick(data) {
				// 进行页面跳转
				console.log(data)
				this.setVideoData(data);
				uni.navigateTo({
					url: `/subpkg/pages/video-detail/video-detail`
				});
			}
		},
		created() {}
	}
</script>

<style lang="scss" scoped>
	.hot-video-container {
		background-color: $uni-bg-color-grey;
	}
</style>
